<template>
	
	<ServerLogSearch v-model="search" @search-click="page = 1; queryLoggers()" />
	
	<Table border :columns="columns" :data="data">
		
		<template #action="{ row, index }">
			<Button v-auth:log:opt:query type="primary" icon="ios-search" size="small" style="margin-right: 5px"
				@click="show(row)">查看</Button>
		</template>
		
		<template #status="{ row, index }">
			<DotTag type="primary" v-if="row.state">成功</DotTag>
			<DotTag type="error" v-else>失败</DotTag>
		</template>
		
		<template #footer>
			<div style="min-width: 300px; max-width: 380px;">
				<van-pagination v-model="page" :total-items="total" 
						:items-per-page="pageSize" @page-click="queryLoggers"
						:show-page-size="5" force-ellipses />
			</div>
		</template>
	</Table>
	
	<Drawer
		title="查看"
		v-model="drawer"
		width="720"
		:mask-closable="false"
		:styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
		
		<!-- 引入菜单表单组件 -->
		<ServerLogDetail :row="row"></ServerLogDetail>
		
		<div class="demo-drawer-footer">
			<Button style="margin-right: 8px" @click="drawer = false">关闭</Button>
		</div>
		
	</Drawer>
	
</template>

<script>

import ServerLogDetail from '../components/log/ServerLogDetail.vue'
import ServerLogSearch from '../components/log/ServerLogSearch.vue'
import DotTag from '../components/DotTag.vue'
import VanPagination from '../components/VanPagination.vue' 

export default {
	data () {
		return {
			page: 1, 
			total: 0,
			pageSize: 12,
			drawer: false,
      row: {},
      search: {},
			columns: [
				 {
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					title: '日志编号',
					key: 'id',
          width: 200,
				},
        {
          title: '系统',
          key: 'appName',
        },
        {
          title: '模块',
          key: 'moduleName'
        },
				{
					title: '请求方式',
					key: 'method',
          width: 100,
          align: "center",
				},
				{
					title: '操作人员',
					key: 'user'
				},
				{
					title: '操作地址',
					key: 'ip',
          width: 150,
				},
				{
					title: '操作地点',
					key: 'address'
				},
				{
					title: '操作时间',
					key: 'createTime',
          width: 180,
				},
				{
					title: '操作状态',
					key: 'status', 
					slot: 'status',
          width: 100,
          align: "center",
				},
				{
					title: '操作地址',
					slot: 'action',
					width: 100,
					align: 'center'
				},
			],
			data: [],
		}
	},
  created() {
     this.queryLoggers();
  },
	methods: {
		show(row) {
			this.drawer = true ;
      this.row = row ;
		},
    queryLoggers() {
       this.$api.queryServiceLoggers(this.page, this.pageSize, this.search).then(ret=> {
          if (ret.data.status) {
             this.data = ret.data.data.list ;
             this.total = ret.data.data.total ;
          }
       })
    }
	},
	components: {
		ServerLogDetail, 
		DotTag,
		VanPagination, 
		ServerLogSearch
	}
}
</script>

<style>
.demo-drawer-footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 1px solid #e8e8e8;
	padding: 10px 16px;
	text-align: right;
	background: #fff;
}
</style>